<template>
  <el-transfer
    ref="transferRef"
    v-bind="$attrs"
    @change="
      (value, direction, movedKeys) =>
        emit('change', value, direction, movedKeys)
    "
    @left-check-change="
      (value, movedKeys) => emit('left-check-change', value, movedKeys)
    "
    @right-check-change="
      (value, movedKeys) => emit('right-check-change', value, movedKeys)
    "
  >
    <template
      v-for="item in $attrs.slots"
      #[item.name]="scopedData"
      :key="item.name"
    >
      <component :is="item.content" v-bind="scopedData" />
    </template>
  </el-transfer>
</template>

<script setup>
const emit = defineEmits(['change', 'left-check-change', 'right-check-change'])

const transferRef = ref(null)

defineExpose(
  new Proxy(
    {},
    {
      get(target, key) {
        return transferRef.value?.[key]
      },
      has(target, key) {
        return key in transferRef.value
      },
    },
  ),
)
</script>
